#content { width: 650px; position: fixed; left: 230px; top: 0px; padding: 20px 0;overflow: auto; bottom: 0;}

#list { width: 230px; position: fixed; left: 0px; top: 0px; background: #2e354f; bottom: 0px; color:#e0e0e0;}

.button { width: 230px; height: 35px; border-bottom: 1px solid #aaa; line-height: 25px; font-size: 12px; }
.button span { display: block; padding: 0 10px; margin: 4px; border: 1px solid #666; border-radius: 3px;cursor: pointer;}
.button span:hover { background: rgba(225, 225, 225, 0.1)}

.list { position: absolute; top: 36px; left: 0px; bottom: 0px; width: 100%; overflow: auto;}
.list .listItem { line-height: 35px; border-bottom:1px solid rgba(225, 225, 225, 0.3); position: relative; padding: 0 30px 0 10px; font-size: 14px;overflow: hidden;text-overflow:ellipsis; white-space: nowrap;}
.list .listItem:hover {  background: rgba(225, 225, 225, 0.1)}
.list .listItem.active { background: rgba(225, 225, 225, 0.2)}
.list .listItem.active::after { content: '➱'; position: absolute; top: 0px; right: 0px; line-height: 35px;width: 30px; color: #fff; font-size: 16px; text-align: center;}



.buttons { padding: 10px 0 0 0;}

.Content_button { float: right; border-radius: 5px; border: 1px solid #ccc; margin: 0 10px 0 0; padding: 7px 17px; font-size: 13px; color: #fff; cursor: pointer;}
.Content_button:hover { background: #f0f0f0;}

.Content_button.creat {background: #5cb85c; border-color: #4cae4c;}
.Content_button.creat:hover {background: #449d44; border-color: #398439;}

.Content_button.delete {background: #d9534f; border-color: #d43f3a;}
.Content_button.delete:hover {background: #c9302c; border-color: #ac2925;}

.Content_button.updata {background: #337ab7; border-color: #2e6da4;}
.Content_button.updata:hover {background: #286090; border-color: #204d74;}

.Content_button.change {background: #f0ad4e; border-color: #eea236;}
.Content_button.change:hover {background: #ec971f; border-color: #d58512;}